<template>
  <div class="top-right-btn">
    <el-col :span="1.5"  v-show="searchInput">
      <el-input
        size="small"
        @keyup.enter.native="triggerEnter"
        v-model.trim="querySearch" :placeholder="$attrs['placeholder']||'关键字'" />
    </el-col>
    <el-col :span="1.5">
      <el-row>
        <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
          <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="显隐列" placement="top">
          <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
        </el-tooltip>
      </el-row>
    </el-col>


    <el-dialog :title="title" :visible.sync="open" append-to-body width="600px">
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="valueTransfer"
        :data="hiddenColumns"
        @change="dataChange"
      ></el-transfer>
    </el-dialog>
  </div>
</template>
<script>
  import {
    findComponentDownward,
    findComponentUpward,
    findComponentUpwardNotBelongElementUI,
  } from '@/utils/findVueDom';
  import {lodashMap} from '@/utils/lodashUtil';
  export default {
    name: 'RightToolbar',
    data() {
      return {
        querySearch: '',
        // 显隐数据
        value: [],
        // 弹出层标题
        title: '显示/隐藏',
        // 是否显示弹出层
        open: false,

        hiddenColumns: [/*{"label": "用户名称", "key": "userName", "hidden": false}, {
          "label": "部门岗位",
          "key": "departName",
          "hidden": false
        }, {"label": "状态", "key": "state", "hidden": false}, {
          "label": "创建时间",
          "key": "addTime",
          "hidden": false
        }, {"label": "更新时间", "key": "lastEditTime", "hidden": false}*/],


        valueTransfer: [/*"userName"*/],


        $appMain: undefined,
        $currentPage: undefined,
        $elTable: undefined,
      };
    },
    props: {
      showSearch: {
        type: Boolean,
        default: true,
      },
      searchInput: {
        type: Boolean,
        default() {
          return false;
        },
      },
    },
    created() {


    },
    mounted() {
    },
    activated() {


      this.initColumsDisplay();


    },
    methods: {

      triggerEnter() {
        this.$emit('triggerEnter', this.querySearch);
      },

      /**
       * @flow
       *  获取 table的所有 columns
       *  $emit('layout',(columnsDisplay)=> $data.columnsDisplay=columnsDisplay) 控制父的 $data.columnsDisplay
       * */
      initColumsDisplay() {
        this.initFindDom();

        var columsFromTable = this.getColumsFromTable();
        // console.log("columsFromTable", JSON.stringify(columsFromTable))
        this.hiddenColumns = columsFromTable;
        this.valueTransfer = this.hiddenColumns.filter(item => {
          return item.hidden;
        }).map(item => item.key);
        // console.log("    this.valueTransfer", this.valueTransfer)

        //控制父类 隐藏表格字段
        var forParent = this.computedParentColumsDisplay(this.hiddenColumns);
        this.$emit('layout', forParent);

      },
      /** [{key  label}] to-->  {key:1,key:2}*/
      computedParentColumsDisplay(_array) {
        var _object = {};
        _array.map(item => {
          _object[item.key] = item.hidden ? 1 : 0;
        });
        return _object;
      },
      initFindDom() {
        var AppMain = findComponentUpward(this, 'AppMain');

        this.$appMain = AppMain;
        this.$currentPage = findComponentUpwardNotBelongElementUI(this);


        var table = findComponentDownward(this.$currentPage, 'ElTable');
        this.$elTable = table;


      },
      setColumsCache(values) {
        localStorage.setItem(`columns_for_show/${this.$route.fullPath}`, JSON.stringify(values));
      },
      getColumsCache() {
        try {
          return JSON.parse(localStorage.getItem(`columns_for_show/${this.$route.fullPath}`));
        } catch (e) {
          return null;
        }
      },
      getColumsFromTable() {
        if (this.getColumsCache()) {
          return this.getColumsCache();
        }
        // 显隐列初始默认隐藏列
        var columns = this.$elTable.$children.map(item => {
          var label = item && item.columnConfig && item.columnConfig.label;
          if (label && label != '操作') {
            return {
              label: item.columnConfig.label,
              key: item.columnConfig.property,
              hidden: false,  //默认全都 【不隐藏】
            };
          }
        });
        columns = columns.filter(item => {
          return item && item.label;
        });
        return columns;

      },
      // 搜索
      toggleSearch() {
        this.$emit('update:showSearch', !this.showSearch);
      },
      // 刷新
      refresh() {
        this.$emit('queryTable');
      },
      // 右侧列表元素变化
      dataChange(keys) {
        this.hiddenColumns.map((item, index) => {
          this.hiddenColumns[index].hidden = keys.includes(item.key);
        });


        this.setColumsCache(this.hiddenColumns);
        //控制父类 隐藏表格字段
        var forParent = this.computedParentColumsDisplay(this.hiddenColumns);
        this.$emit('layout', forParent);
      },
      // 打开显隐列dialog
      showColumn() {
        this.open = true;
      },
    }
    ,
  }
  ;
</script>
<style lang="scss" scoped>
  ::v-deep .el-transfer__button {
    border-radius: 50%;
    padding: 12px;
    display: block;
    margin-left: 0px;
  }

  ::v-deep .el-transfer__button:first-child {
    margin-bottom: 10px;
  }
</style>
